import React, { useEffect, useRef, useState } from "react";
import {
  DashboardOutlined,
  SettingOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { MenuProps, Watermark } from "antd";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import {
  href,
  Outlet,
  useLocation,
  useNavigate,
  useRouteLoaderData,
} from "react-router-dom";
import { IAuthLoader } from "@lgq/routes/AuthLoader";
import { searchRoute } from "@lgq/utils";
import router, { routers } from "@lgq/routes";
import SiderMenu from "@lgq/pages/components/menu";
import { IMenu } from "@lgq/types";
import { useStore } from "@lgq/store";

const { Header, Content, Footer, Sider } = Layout;

const siderStyle: React.CSSProperties = {
  overflow: "auto",
  height: "100vh",
  position: "fixed",
  insetInlineStart: 0,
  top: 0,
  bottom: 0,
  scrollbarWidth: "thin",
  scrollbarGutter: "stable",
  zIndex: 100,
};

const contentStyle: React.CSSProperties = {
  overflow: "auto",
  scrollbarWidth: "thin",
  scrollbarGutter: "stable",
  padding: "0px 20px 0px 220px",
};

const HomeLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorFillContent, colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const [isInit, setIsiInit] = useState(false);
  const isInitRef = useRef(false);
  const navigator = useNavigate();
  const location = useLocation();
  const { pathname } = useLocation();
  const data = useRouteLoaderData("layout") as IAuthLoader;



  return (
    <div
      style={{
        width: "100%",
      }}
    >
      <Header
        style={{
          background: "red",
          width: "100%",
          position: "fixed",
          top: 0,
          zIndex: 1000,
          backgroundColor: "red",
        }}
      />
      <div className="flex flex-row">
        <div style={{ background: "#001529", ...siderStyle }}>
          <Sider
            theme="dark"
            collapsed={collapsed}
            collapsible
            onCollapse={(value) => setCollapsed(value)}
          >
            <Header style={{ padding: 0, background: colorBgContainer }} />
            <SiderMenu />
          </Sider>
        </div>
        <Layout style={contentStyle}>
          <Header style={{ padding: 0, background: "#f5f5f5" }} />

          <Content style={{ margin: "0 16px" }}>
            <Watermark content="liuguoquan">
              <Outlet />
            </Watermark>
          </Content>

          <Footer style={{ textAlign: "center" }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </div>
    </div>
  );
};

export default HomeLayout;
